<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 1000px;
        }
        .box{
            border: 3px dashed #ccc;
            padding: 20px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <!-- <input type="text" id="a">
    <br> -->
    <div id="app" class="box">
        <p>父组件</p>
        <p>flag1:{{ flag1 }}</p>
        <comp-a :disabled=" flag1 "></comp-a>
        <p>flag2:{{ flag2 }}</p>
        <comp-a :disabled=" flag2 "></comp-a>
        <hr>
        <p>num1:{{ num1 }}</p>
        <comp-b :num=" num1 "></comp-b>
        <p>num2:{{ num2 }}</p>
        <!-- <comp-b :num=" num2 "></comp-b> -->
        <comp-b :num=" num2*1 " :msg=" 4567 "></comp-b>
        <comp-b :num=" num2*1 " :msg=" 'abcd' "></comp-b>
        <hr>
        <p>arg:{{ typeof(arg) }}{{ arg }}</p>
        <comp-c :info=" arg " :skill=" 'html' "></comp-c>
        <!-- <comp-c></comp-c> -->
        <!-- vue的属性绑定时，是可以完成静态属性传值 -->
        <comp-c :info=" arg " :num=" 99 " skill="css"></comp-c>

    </div>

    <script type="text/x-template" id="compA">
        <div class="box">
            <p>子组件:(该组件内部的输入框，需要有调用的父组件决定是否为禁用)</p>
            <input type="text" :disabled=" disabled ">
        </div>
    </script>

    <script type="text/x-template" id="compB">
        <div class="box">
            <p>子组件:(该组件内部的输入框，需要有调用的父组件提供分数)</p>
            <p>num:{{ num.toFixed(1) }}</p>
        </div>
    </script>

    <script type="text/x-template" id="compC">
        <div class="box">
            <p>info:{{ info }}</p>
            <p>num:{{ num }}</p>
            <p>user:{{ user }}</p>
            <p>skill:{{ skill }}</p>
        </div>
    </script>

    <script>
        Vue.component("CompA", {
            template:"#compA",
            props:["disabled"]
        })
        Vue.component("CompB", {
            template:"#compB",
            /*
            因为props作为接受父组件传入数据存储仓库，为子组件的功能构成提供必要的执行参数，而这些参数在组件的渲染过程中启动重要的作用
            所以组件接受的数据参数必须保证数据严格性，防止子组件构建错误

            props 通过定义Object取值，可以在拦截属性取值的同时完成数据校验，并为程序员提供必要的错误提示
            */
            // props:["num"]
            props:{
                // key 被拦截的属性名
                // value JS数据构造器
                num:Number,
                msg:Number|String
            }
        })
        Vue.component("CompC", {
            template:"#compC",
            props:{
                // key 被拦截的属性名
                // value object={ type:数据类型,default:默认值,required:Boolean是否为必传数据,validator:Function自定义校验  }
                // info:{}  // 等效于 prorps:["info"]
                info:{
                    type:String,
                    // 表示该属性在组件使用时为必传属性
                    required:true
                },
                num:{
                    default:100
                },
                user:{
                    type:Object,
                    // 当数据的默认值为引用类型数据时，必须使用工厂函数模式
                    // default:{
                    //     name:"",
                    //     sex:"未知"
                    // }
                    default:function(){
                        return {
                            name:"",
                            sex:"未知"
                        }
                    }
                },
                skill:{
                    type:String,
                    validator:function(nv){
                        // 该方法存在一个必然形参，参数为该属性绑定的取值
                        // 通过返回 true 校验成功。通过返回false 表示校验失败
                        // console.log(nv)
                        let flag = ["html","css","js"].includes(nv);
                        if(!flag){
                            console.error(nv+" 取值不在有效取值范围中，该变量的有效取值为：html|css|js");
                        }
                        return flag
                    }
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                flag1:true,
                flag2:[1,2],
                num1:12,
                num2:"1234",
                arg:"字符串"
            }
            
        })
    </script>
</body>
</html>